<template>
	<view class="apply">
		<view style="margin-bottom: 20upx;">
			<van-cell-group>
				<van-cell is-link @click="onLoansShow">
					<view slot="title" class="apply-cell">
						<view class="van-cell-text">行业</view>
						<text>{{ loans }}</text>
					</view>
				</van-cell>
				<van-cell is-link @click="onAreaShow">
					<view slot="title" class="apply-cell">
						<view class="van-cell-text">城市</view>
						<text>{{ address }}</text>
					</view>
				</van-cell>
				<van-field
					label="姓名"
					placeholder="请输入姓名"
					@change="cName"
					clearable
					title-width="80px"
				/>
				<van-field
					label="手机号"
					placeholder="请输入手机号"
					@change="cPhone"
					type="number"
					clearable
					title-width="80px"
				/>
				<van-field
					label="身份证号"
					placeholder="请输入身份证号"
					@change="cIdCards"
					type="idcard"
					title-width="80px"
					clearable
				/>
			</van-cell-group>
		</view>
		<view class="apply-license" style="margin-bottom: 20upx;">
			<view class="apply-license-wrap">
				<view class="licenseItem" @click="onLicensel">
					<block v-if="from.Licensel">
						<image :src="from.Licensel" mode="aspectFit"></image>
					</block>
					<block v-else>
						<view class="iconfont iconpaizhao"></view>
						<view class="text">营业执照(正本)</view>
					</block>
				</view>
				<view class="licenseItem van-hairline--left" @click="onLicenser">
					<block v-if="from.Licenser">
						<image :src="from.Licenser" mode="aspectFit"></image>
					</block>
					<block v-else>
						<view class="iconfont iconpaizhao"></view>
						<view class="text">营业执照(副本)</view>
					</block>
				</view>
			</view>
		</view>

		<view style="margin-bottom: 20upx; padding: 0 20upx;">
			<van-cell-group>
				<van-cell style="box-shadow:0 5rpx 15rpx 0 rgba(0, 0, 0, 0.1);">
					<view slot="title">
						<view class="van-cell-text">简介</view>
						<view class="intro">
							<textarea 
							@blur="cTextarea"
							placeholder-style="color:#9b9b9b" 
							placeholder="请输入简介"/>
						</view>
					</view>
				</van-cell>
			</van-cell-group>
		</view>
		<view class="apply-lab" style="margin-bottom: 20upx;">
			<van-field placeholder="需要多少LAB" type="number" clearable @change="cSum" />
		</view>

		<view class="apply-btn">
			<van-button :loading="loading" custom-class="apply-reset-btn" size="large" @click="onSubmit">提交申请</van-button>
		</view>
		<van-popup :show="loansShow" position="bottom" @close="onLoansClose">
			<van-picker
				show-toolbar
				@cancel="onLoansClose"
				@confirm="onLoansConfirm"
				:columns="columns"
			/>
		</van-popup>
		<van-popup :show="areaShow" position="bottom" @close="onAreaClose">
			<van-area :area-list="areaList" @cancel="onAreaClose" @confirm="onAreaConfirm" />
		</van-popup>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
import AreaList from '../../../common/utils/area.js';
export default {
	data() {
		return {
			columns: ['房代', '车代', '康代', '消代'],
			loansShow: false,
			loading: false,
			loans: '',
			areaList: AreaList,
			areaShow: false,
			address: '',
			from: {
				name: '',
				phone: '',
				IdCards: '',
				textarea: '',
				Licensel: '',
				Licenser: '',
				sum: ''
			},
			verify: {},
			timer: {
				func: '',
				count: '',
				text: '获取验证码'
			} // 倒计时
		};
	},
	onLoad() {},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		onLoansShow() {
			this.loansShow = true;
		},
		onAreaShow() {
			this.areaShow = true;
		},
		onLoansClose() {
			this.loansShow = false;
		},
		onAreaClose() {
			this.areaShow = false;
		},
		onLoansConfirm(e) {
			const code = e.detail.value;
			this.loans = code;
			this.onLoansClose();
		},
		onAreaConfirm(e) {
			const code = e.detail.values;
			let text = '';
			code.forEach(e => {
				text += e.name + ' ';
			});
			this.address = text;
			this.onAreaClose();
		},
		onLicensel() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					this.from.Licensel = res.tempFilePaths[0];
					// this.$set(this.from, 'Licensel', res.tempFilePaths[0])
				}
			});
		},
		onLicenser() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					console.log(res.tempFilePaths[0])
					this.from.Licenser = res.tempFilePaths[0];
					// this.$set(this.from, 'Licenser', res.tempFilePaths[0])
				}
			});
		},
		onSubmit() {
			if (!this.loans) {
				uni.showToast({
					title: '请选择行业',
					icon: 'none'
				});
				return;
			}
			if (!this.address) {
				uni.showToast({
					title: '请上选择城市',
					icon: 'none'
				});
				return;
			}
			if (!this.from.Licensel || !this.from.Licenser) {
				uni.showToast({
					title: '请上传营业执照',
					icon: 'none'
				});
				return;
			}
			const regSubmit = reg.regSubmit(this.from);
			if (regSubmit) {
				uni.showToast({
					title: regSubmit,
					icon: 'none'
				});
				return;
			}
			if (this.loading) return
			this.loading = true;
			this.postFromData()
		},
		uploadImage () {
			this.$http.upload({
				url: '/getWc/images',
				uid: this.userInfo.id,
				path_arr: [this.from.Licensel, this.from.Licenser]
			})
			.then(e => {
				this.loading = false;
				if (e.length === 2) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/apply-store/details'
						});
					}, 500)
					return
				}
			})
		},
		postFromData () {
			this.$http
				.applyStore({
					uid: this.userInfo.id,
					industry: this.loans,
					city: this.address,
					name: this.from.name,
					tel: this.from.phone,
					idcard: this.from.IdCards,
					jianjie: this.from.textarea,
					needlab: this.from.sum
				})
				.then(e => {
					if (e.data.msg === 'ok') {
						this.uploadImage()
						return;
					}
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					});
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		cName(e) {
			this.from.name = e.detail;
		},
		cPhone(e) {
			this.from.phone = e.detail;
		},
		cIdCards(e) {
			this.from.IdCards = e.detail;
		},
		cTextarea (e) {
			this.from.textarea = e.detail.value
		},
		cSum(e) {
			this.from.sum = e.detail;
		}
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/user/apply-store/details'
		});
	}
};
</script>

<style lang="scss" scoped>
$color: #7e7e7e;
image {
	width: 100%;
	height: 100%;
}
.apply {
	padding: 20upx 0 160upx 0;
	&-cell {
		display: flex;
		.van-cell-text {
			width: 80px;
		}
	}
	.intro {
		padding: 20upx 10upx;
		line-height: 1.4;
		textarea {
			width: 100%;
			height: 150upx;
		}
	}
	&-license {
		padding: 0 20upx;
		&-wrap {
			display: flex;
			border: 2upx solid #7e7e7e;
			background-color: #fff;
			.licenseItem {
				display: flex;
				flex-wrap: wrap;
				align-content: center;
				width: 50%;
				height: 200upx;
				padding: 20upx;
				text-align: center;
				.iconfont {
					width: 100%;
					line-height: 1;
					font-size: 100upx;
					color: #9b9b9b;
				}
				.text {
					width: 100%;
					line-height: 1;
					color: #9b9b9b;
				}
			}
		}
	}
}
</style>
